<template>
  <!-- 字段表查询页面 -->
  <div ref="content">
    <el-row>
      <div class="u-create-table">
        <el-col :span="4">
          <el-input
            placeholder="根据表名查找"
            prefix-icon="el-icon-search"
            v-model="searchVal"
          ></el-input>
        </el-col>
        <el-button
          class="u-create-table-btn"
          type="primary"
          @click="dialogVisible = true"
        >
          新建表
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
      </div>
      <!-- 一级列表 -->
      <el-col :span="6">
        <el-card class="m-box-card">
          <div
            v-for="(item, index) in card_level_1"
            :key="index"
            :class="{
              'z-primary-color': index === level_1_index,
              'z-display': charIn(item)
            }"
            @click="selectFn(item, index, 1)"
            class="u-text item"
          >
            <div class="z-flex-box">
              <div class="u-flex-left">
                <abbr :title="item.description">
                  <p class="u-p-text">{{ item.description }}</p>
                </abbr>
                <abbr :title="item.tableName">
                  <p class="u-p-text">{{ item.tableName }}</p>
                </abbr>
              </div>
              <div class="u-flex-right" @click.stop>
                <i class="el-icon-arrow-right z-f-right"></i>
                <el-dropdown>
                  <span>
                    <i class="el-icon-setting z-f-right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="showTable(item, 'click')"
                      >表详情</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="toInsert('update', item.tableName)"
                      >插入(老)</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="toInsert('update', item.tableName)"
                      >修改(老)</el-dropdown-item
                    >
                    <!-- <el-dropdown-item @click.native="delectTable('update',item)">删除</el-dropdown-item> -->
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>

          <div v-if="card_level_1 && !card_level_1.length">暂无数据</div>
        </el-card>
      </el-col>
      <!-- 二级列表 -->
      <el-col :span="4">
        <el-card class="m-box-card" v-if="level_2_show">
          <div
            v-for="(item, index) in card_level_2"
            :key="index"
            :class="{ 'z-primary-color': index === level_2_index }"
            @click="selectFn(item, index, 2)"
            class="u-text item"
          >
            <div class="z-flex-box">
              <div class="u-flex-left">
                <abbr :title="item.description">
                  <p class="u-p-text">{{ item.description }}</p>
                </abbr>
                <abbr :title="item.fieldName">
                  <p class="u-p-text">{{ item.fieldName }}</p>
                </abbr>
              </div>
              <div class="u-flex-right">
                <el-dropdown v-if="item.isVisual == 1">
                  <span>
                    <i class="el-icon-setting z-f-right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item @click.native="showTable(item,'click')">表详情</el-dropdown-item>
                    <el-dropdown-item @click.native="toInsert('update',item.tableName)">插入(老)</el-dropdown-item>
                    <el-dropdown-item @click.native="toInsert('update',item.tableName)">修改(老)</el-dropdown-item>-->
                    <el-dropdown-item @click.native="delectTable_2(item, index)"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <i class="el-icon-arrow-right z-f-right"></i>
              </div>
            </div>
          </div>
          <div v-if="card_level_2 && !card_level_2.length">暂无数据</div>
          <div class="u-operation">
            <el-popover
              placement="bottom-start"
              title="添加虚拟字段"
              width="350"
              trigger="click"
            >
              <el-form
                :model="fictitiousForm"
                :rules="fictitiousFormRule"
                ref="fictitiousForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <!-- <el-form-item label="table_id" prop="table_id">
                  <el-input v-model="fictitiousForm.table_id"></el-input>
                </el-form-item>-->
                <el-form-item label="字段名" prop="field_name">
                  <el-input v-model="fictitiousForm.field_name"></el-input>
                </el-form-item>
                <el-form-item label="字段说明" prop="description">
                  <el-input v-model="fictitiousForm.description"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="fictitiousHttp()"
                    >确定</el-button
                  >
                </el-form-item>
              </el-form>
              <abbr title="添加虚拟字段" slot="reference">
                <el-button
                  type="primary"
                  slot="reference"
                  icon="el-icon-plus"
                  circle
                ></el-button>
              </abbr>
            </el-popover>
            <!-- <el-button type="warning" icon="el-icon-edit" circle></el-button> -->
            <!-- <el-button type="danger" icon="el-icon-delete" circle></el-button> -->
          </div>
        </el-card>
      </el-col>
      <!-- 三级列表 -->
      <el-col :span="12">
        <el-card class="m-box-card" v-if="level_3_show">
          <!-- // -->
          <div class="u-text item z-sticky">
            <!-- :class="{'z-primary-color':index===level_3_index}" -->
            <div class="z-flex-box">
              <div class="u-flex-left">
                <el-row>
                  <el-col :span="2">存在</el-col>
                  <el-col :span="7">
                    <p class="u-p-text">属性名</p>
                  </el-col>
                  <el-col :span="9">
                    <p class="u-p-text">说明</p>
                  </el-col>
                  <el-col :span="3">
                    <abbr title="生命周期">
                      <p class="u-p-text">生命周期</p>
                    </abbr>
                  </el-col>
                  <el-col :span="3">
                    <abbr title="操作方法">
                      <p class="u-p-text">操作方法</p>
                    </abbr>
                  </el-col>
                </el-row>
              </div>
              <div class="u-flex-right">
                <i v-if="false" class="el-icon-arrow-right z-f-right"></i>
              </div>
            </div>
          </div>
          <!-- // -->
          <!-- @click="setGroupProperties(item.groupProperties,index)" -->
          <div
            v-for="(item, index) in card_level_3"
            :key="index"
            class="u-text item"
            @click="showConfigDialog(item, index)"
          >
            <!-- :class="{'z-primary-color':index===level_3_index}" -->
            <div class="z-flex-box">
              <div class="u-flex-left">
                <el-row>
                  <el-col :span="2">
                    <!-- disabled="false" -->
                    <el-checkbox v-model="item.checked" disabled></el-checkbox>
                  </el-col>
                  <el-col :span="7">
                    <abbr :title="item.property_name">
                      <p class="u-p-text">{{ item.property_name }}</p>
                    </abbr>
                  </el-col>
                  <el-col :span="9">
                    <abbr :title="item.description">
                      <p class="u-p-text">{{ item.description }}</p>
                    </abbr>
                  </el-col>
                  <el-col :span="3">
                    <abbr :title="item.life_cycle">
                      <p class="u-p-text">{{ item.life_cycle }}</p>
                    </abbr>
                  </el-col>
                  <el-col :span="3">
                    <abbr :title="item.related_operation">
                      <p class="u-p-text">{{ item.related_operation }}</p>
                    </abbr>
                  </el-col>
                </el-row>
              </div>
              <div class="u-flex-right">
                <i class="el-icon-arrow-right z-f-right"></i>
              </div>
            </div>
          </div>
          <div v-if="card_level_3 && !card_level_3.length">暂无数据</div>
        </el-card>
      </el-col>
      <!-- 四级列表 -->
      <el-col :span="4">
        <el-card class="m-box-card" v-if="level_4_show">
          <div
            v-for="(item, key, index) in card_level_4"
            :key="index"
            class="u-text-3 item"
          >
            <div class="z-flex-box">
              <div class="u-flex-left u-level-4">
                <p class="u-p-text">{{ item.propertyRelatedOperation }}</p>
                <p class="u-p-text">{{ item.propertyCycle }}</p>
                <p class="u-p-text">{{ item.propertyName }}</p>
                <p class="u-p-text">{{ item.propertyDesc }}</p>
                <p class="u-p-text">{{ item.propertyId }}</p>
              </div>
              <div class="u-flex-right">
                <!-- <i class="el-icon-arrow-right z-f-right"></i> -->
              </div>
            </div>
          </div>
          <div v-if="card_level_4 && !card_level_4.length">暂无数据</div>
        </el-card>
      </el-col>
    </el-row>
    <el-drawer
      class="m-el-drawer"
      title="我是标题"
      :wrapperClosable="false"
      close-on-press-escape
      :visible.sync="drawer"
      :with-header="false"
      size="70%"
    >
      <div>
        <div class="m-table-box">
          <h2>
            表详情
            <span class="u-is-create">{{ isCreated ? '（已创建）' : '' }}</span>
            <!-- <el-button class="u-table-add-btn" type="primary" @click="tableAddData()" size="small">编辑</el-button> -->
            <el-button
              class="u-table-add-btn"
              type="primary"
              @click="adminCreate()"
              size="small"
              v-if="!isCreated"
              >创建物理表</el-button
            >
            <i class="el-icon-close" @click="closeWindow()"></i>
          </h2>
          <el-table
            :data="tableData"
            height="40vh"
            header-cell-class-name="thead"
          >
            <!-- <el-table-column prop="fieldId" label="fieldId"></el-table-column> -->
            <el-table-column
              prop="fieldName"
              label="字段名"
              width="150"
            ></el-table-column>
            <!-- <el-table-column prop="description" label="备注"></el-table-column> -->
            <el-table-column
              prop="fieldType"
              label="类型"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="fieldLength"
              label="长度"
              width="50"
            ></el-table-column>
            <el-table-column prop="isNullable" label="是否为空">
              <template slot-scope="scope">
                <div>{{ scope.row.isNullable == 0 ? '否' : '是' }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="fieldDefaultValue"
              label="默认值"
            ></el-table-column>
            <el-table-column prop="isPrimaryKey" label="是否为主键" width="100">
              <template slot-scope="scope">
                <div>{{ scope.row.isPrimaryKey == 0 ? '否' : '是' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="indexType" label="是否为索引" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.indexType == 0">无索引</div>
                <div v-if="scope.row.indexType == 1">普通索引</div>
                <div v-if="scope.row.indexType == 2">唯一索引</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="fieldComment"
              label="注释"
              width="250"
            ></el-table-column>
            <el-table-column prop="isIncrement" label="是否自增">
              <template slot-scope="scope">
                <div>{{ scope.row.isIncrement == 0 ? '否' : '是' }}</div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="createTime" label="createTime"></el-table-column>
          <el-table-column prop="updateTime" label="updateTime"></el-table-column>
          <el-table-column prop="operator" label="operator"></el-table-column>
            <el-table-column prop="enable" label="enable"></el-table-column>-->
            <!-- <el-table-column prop="tid" label="tid"></el-table-column> -->
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <div>
                  <!-- <a @click="addField()">新增属性</a> -->
                  <a @click="updateField(scope.row)">更新</a>
                  <a @click="deleteField(scope.row)">删除</a>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="m-window-box">
            <div>
              <abbr title="添加新字段(表已创建不可用,可批量)" v-if="!isCreated">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="addTableTemplate()"
                  circle
                ></el-button>
              </abbr>
              <abbr title="添加新字段(不可批量)" v-else>
                <el-button
                  type="danger"
                  icon="el-icon-plus"
                  @click="addTableTemplate()"
                  circle
                ></el-button>
              </abbr>
              <abbr title="保存到当前表">
                <el-button
                  type="primary"
                  icon="el-icon-check"
                  circle
                  v-if="!isCreated && addTableData && addTableData.length > 0"
                  @click="addTableDataNow()"
                ></el-button>
              </abbr>
              <abbr title="保存">
                <el-button
                  type="danger"
                  icon="el-icon-check"
                  circle
                  v-if="isCreated && addTableData && addTableData.length > 0"
                  @click="addTableDataNow()"
                ></el-button>
              </abbr>
            </div>
            <div v-if="addTableData && addTableData.length > 0">
              <el-table :data="addTableData" height="40vh">
                <el-table-column prop="fieldName" label="字段名" width="125">
                  <template slot-scope="scope">
                    <div>
                      <el-input
                        v-model="addTableData[scope.$index].fieldName"
                        placeholder="请输入字段"
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="fieldType" label="类型" width="125">
                  <template slot-scope="scope">
                    <div>
                      <el-select
                        v-model="addTableData[scope.$index].fieldType"
                        @change="fieldTypeChange($event, scope.$index, 'table')"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, index) in typeArr"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="fieldLength" label="长度" width="125">
                  <template slot-scope="scope">
                    <div>
                      <el-input
                        v-model="addTableData[scope.$index].fieldLength"
                        :placeholder="testPlaceholder"
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="isNullable" label="是否为空" width="125">
                  <template slot-scope="scope">
                    <div>
                      <el-select
                        v-model="addTableData[scope.$index].isNullable"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, index) in booleanArr"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fieldDefaultValue"
                  label="默认值"
                  width="125"
                >
                  <template slot-scope="scope">
                    <div>
                      <el-select
                        v-if="
                          addTableData[scope.$index].fieldType === 'datetime'
                        "
                        v-model="addTableData[scope.$index].fieldDefaultValue"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in datetimeArr"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                      <el-input
                        v-else
                        v-model="addTableData[scope.$index].fieldDefaultValue"
                        placeholder="输入默认值"
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="isPrimaryKey"
                  label="是否为主键"
                  width="125"
                >
                  <template slot-scope="scope">
                    <div>
                      <el-select
                        v-model="addTableData[scope.$index].isPrimaryKey"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, index) in booleanArr"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="indexType"
                  label="是否为索引"
                  width="125"
                >
                  <template slot-scope="scope">
                    <div>
                      <el-select
                        v-model="addTableData[scope.$index].indexType"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, index) in spBooleanArr"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="fieldComment" label="注释" width="125">
                  <template slot-scope="scope">
                    <div>
                      <el-input
                        v-model="addTableData[scope.$index].fieldComment"
                        placeholder="请输入注释"
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="isIncrement"
                  label="是否自增"
                  width="125"
                >
                  <template slot-scope="scope">
                    <div>
                      <el-select
                        v-model="addTableData[scope.$index].isIncrement"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, index) in booleanArr"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 新建一级表的弹框 -->
    <el-dialog title="新建表" :visible.sync="dialogVisible" width="40%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="新建表名" prop="table_name">
          <el-input v-model="ruleForm.table_name"></el-input>
        </el-form-item>
        <el-form-item label="表说明" prop="description">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="父表ID" prop="parent_id">
          <el-input v-model="ruleForm.parent_id"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="createTable()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 视窗中更新字段的弹框 -->
    <el-dialog title="更新字段" :visible.sync="updateFieldFormShow" width="40%">
      <el-form :model="updateFieldForm" label-width="100px" class>
        <el-form-item label="字段名">
          <el-input v-model="updateFieldForm.fieldName"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="updateFieldForm.fieldType"
            @change="fieldTypeChange($event, '', 'form')"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="长度">
          <el-input
            v-model="updateFieldForm.fieldLength"
            :placeholder="testPlaceholder"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否为空">
          <el-select v-model="updateFieldForm.isNullable" placeholder="请选择">
            <el-option
              v-for="(item, index) in booleanArr"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认值">
          <el-select
            v-if="updateFieldForm.fieldType === 'datetime'"
            v-model="updateFieldForm.fieldDefaultValue"
            placeholder="请选择"
          >
            <el-option
              v-for="item in datetimeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            v-else
            v-model="updateFieldForm.fieldDefaultValue"
            placeholder="输入默认值"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否为主键">
          <el-select
            v-model="updateFieldForm.isPrimaryKey"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in booleanArr"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为索引">
          <el-select v-model="updateFieldForm.indexType" placeholder="请选择">
            <el-option
              v-for="(item, index) in spBooleanArr"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注释">
          <el-input v-model="updateFieldForm.fieldComment"></el-input>
        </el-form-item>
        <el-form-item label="是否自增">
          <el-select v-model="updateFieldForm.isIncrement" placeholder="请选择">
            <el-option
              v-for="(item, index) in booleanArr"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateFieldFormShow = false">取 消</el-button>
        <el-button type="primary" @click="updateFieldUrl()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 配置字段属性 -->
    <el-dialog
      title="配置信息"
      @closed="colseConfigData()"
      :visible.sync="configDialog"
      width="30%"
    >
      <el-form
        :model="configData"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div
          class="u-form-list"
          v-for="(itemF, indexF) in configData.t_id"
          :key="indexF"
        >
          <el-form-item label="属性值">
            <el-select
              v-model="configData.property_value_id[indexF]"
              placeholder="请选择"
              @change="selectValueFn($event, indexF)"
            >
              <el-option
                v-for="item in propertyArr"
                :key="item.value"
                :label="item.property_value"
                :value="item.property_value_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参数">
            <el-popover
              v-if="
                configDataSelect[indexF] == 'nice_enum' ||
                  configDataSelect[indexF] == 'nice_enum_value'
              "
              placement="right"
              width="400"
              trigger="click"
            >
              <el-tree
                :data="tableTree"
                @node-click="handleNodeClick"
              ></el-tree>
              <a slot="reference" @click="setTreeIndex(indexF)">{{
                tableTreeLavble[indexF]
              }}</a>
            </el-popover>
            <el-input
              v-else
              v-model="configData.property_value_param[indexF]"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="configData.description[indexF]"></el-input>
          </el-form-item>
        </div>
        <el-form-item v-if="configType == 'insert'">
          <el-button
            type="primary"
            @click="addConfigForm"
            icon="el-icon-plus"
            circle
          ></el-button>
          <el-button
            type="danger"
            @click="deleteConfigForm"
            icon="el-icon-minus"
            circle
          ></el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="configDialog = false">取 消</el-button>
        <el-button
          type="danger"
          v-if="configType != 'insert'"
          @click="deleteConfigDialog()"
          >删 除</el-button
        >
        <el-button
          type="primary"
          v-if="configType == 'insert'"
          @click="addConfigDialog()"
          >确 定</el-button
        >
        <el-button type="primary" v-else @click="updateConfigDialog()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryList,
  listByCols,
  tableDeleted,
  // coretable,
  listFields,
  // listGPData,
  adminCreateTable,
  // adminDeleteTable,
  listCoreFieldAndDbPropertyData,
  tableInsert,
  isExists,
  saveTableFieldAndDbProperty,
  deleteField,
  updateField,
  isCreatedAdd,
  getTree,
  tableUpdate,
  tableandfieldAdd
} from '@/api/api.js'
export default {
  data () {
    return {
      fictitiousForm: {
        table_id: '',
        field_name: '',
        description: '',
        table_name: ''
      },
      fictitiousFormRule: {
        field_name: [
          { required: true, message: '请输入字段名', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入字段说明', trigger: 'blur' }
        ]
      },
      configType: 'insert',
      configDataSelect: [''],
      tableTreeLavbleIndex: '',
      tableTreeLavble: ['未选择'],
      tableTree: [],
      searchVal: '',
      disabledShow: false,
      configData: {
        property_id: '',
        property_value_id: [''],
        property_value_param: [''],
        description: [''],
        t_id: ['']
      },
      configDialog: false,
      checkedAll: false,
      updateFieldFormShow: false,
      updateFieldForm: {},
      // 类型 请选择  是否为空 1  是否为主键 0 索引 0 是否自增0
      //                     0无索引 1普通索引 2 唯一索引 0
      isCreated: false,
      datetimeArr: [
        {
          value: '时间戳',
          label: '时间戳'
        },
        {
          value: '时间戳(带更新)',
          label: '时间戳(带更新)'
        }
      ],
      typeArr: [
        {
          value: 'datetime',
          label: 'datetime'
        },
        {
          value: 'bigint',
          label: 'bigint'
        },
        {
          value: 'int',
          label: 'int'
        },
        {
          value: 'tinyint',
          label: 'tinyint'
        },
        {
          value: 'varchar',
          label: 'varchar'
        },
        {
          value: 'text',
          label: 'text'
        },
        {
          value: 'decimal',
          label: 'decimal(m,n)'
        }
      ],
      booleanArr: [
        {
          value: 0,
          label: '否'
        },
        {
          value: 1,
          label: '是'
        }
      ],
      spBooleanArr: [
        {
          value: 0,
          label: '无索引'
        },
        {
          value: 1,
          label: '普通索引'
        },
        {
          value: 2,
          label: '唯一索引'
        }
      ],
      addTableDataIn: {
        fieldId: null,
        fieldName: '',
        fieldType: '',
        fieldLength: '',
        isNullable: 1,
        fieldDefaultValue: '',
        isPrimaryKey: 0,
        indexType: 0,
        fieldComment: '',
        isIncrement: 0
      },
      addTableData: [],
      ruleForm: {
        table_name: '',
        description: '',
        parent_id: '0'
      },
      rules: {
        table_name: [
          { required: true, message: '请输入表名', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入表说明', trigger: 'blur' }
        ],
        parent_id: [
          { required: true, message: '请输入父表ID', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      card_level_1: [],
      level_1_index: '',
      card_level_2: [],
      level_2_index: '',
      level_2_show: false,
      card_level_3: [],
      level_3_index: '',
      level_3_show: false,
      card_level_4: [],
      level_4_show: false,
      tableData: [],
      drawer: false,
      tableNameNow: '',
      tableIdNow: '',
      fieldIdTwo: '',
      propertyArr: [],
      testPlaceholder: '请输入长度'
    }
  },
  created () {
    this.getTable()
  },
  watch: {
    drawer (val, oldVal) {
      if (val === false) {
        this.addTableData = []
      }
    }
  },
  methods: {
    delectTable_2 (e, index) {
      console.log(e)
      // 删除第二列的某条数据
      this.$confirm('此操作将删除该列字段, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await tableDeleted([
            {
              table_name: 'core_table_and_field ',
              where: { field_id: [e.fieldId] },
              table_id: this.fictitiousForm.table_id
            }
          ])
          if (res[0]) {
            return
          }
          this.card_level_2.splice(index, 1)
        })
        .catch(() => {})
    },
    setTreeIndex (e) {
      this.tableTreeLavbleIndex = e
      console.log(this.tableTreeLavbleIndex)
    },
    // 配置添加
    addConfigForm () {
      // this.configData.property_id
      this.configData.property_value_id.push('')
      this.configData.property_value_param.push('')
      this.configData.description.push('')
      this.configData.t_id.push('')
      this.tableTreeLavble.push('未选择')
      this.configDataSelect.push('')
    },
    // 配置删除
    deleteConfigForm () {
      if (this.configData.t_id.length > 1) {
        this.configData.property_value_id.pop()
        this.configData.property_value_param.pop()
        this.configData.description.pop()
        this.configData.t_id.pop()
        this.tableTreeLavble.pop()
        this.configDataSelect.pop()
      }
    },
    // 添加虚拟字段
    fictitiousHttp () {
      this.$refs.fictitiousForm.validate(async valid => {
        if (valid) {
          let res = await tableInsert([
            {
              table_name: 'core_table_and_field',
              list: [
                {
                  field_name: this.fictitiousForm.field_name,
                  description: this.fictitiousForm.description,
                  table_id: this.fictitiousForm.table_id
                }
              ]
            }
          ])
          if (res[0]) {
            return
          }
          let newChild = {
            tableId: this.fictitiousForm.table_id,
            description: this.fictitiousForm.description,
            fieldName: this.fictitiousForm.field_name,
            fieldId: res[1].data[0].list[0].id
          }
          this.card_level_2.push(newChild)
          this.$refs.fictitiousForm.clearValidate()
          this.fictitiousForm.field_name = ''
          this.fictitiousForm.description = ''
          this.$refs.content.click()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 选中之后的lable遍历
    selectValueFn (e, index_) {
      this.propertyArr.map((item, index) => {
        if (item.property_value_id === e) {
          this.configDataSelect[index_] = item.property_value
        }
      })
    },
    colseConfigData () {
      this.configData = {
        property_value_id: [''],
        property_value_param: [''],
        description: [''],
        property_id: '',
        t_id: ['']
      }
    },
    handleNodeClick (data) {
      this.tableTreeLavble.splice(this.tableTreeLavbleIndex, 1, data.label)
      this.configData.property_value_param[this.tableTreeLavbleIndex] =
        data.t_id
      console.log(this.configData, ' this.configData')
    },
    // 查询过滤
    charIn (e) {
      if (e.tableName.indexOf(this.searchVal) !== -1) {
        return false
      } else {
        return true
      }
    },
    // 打开配置字段属性 查看下拉菜单配置
    async showConfigDialog (e, index) {
      this.configDataSelect = ['']
      this.tableTreeLavble = ['未选择']
      let res = await queryList({
        table_name: 'core_property_value',
        property_id: e.property_id
      })
      if (res[0]) {
        return
      }
      this.configData.property_id = e.property_id
      this.propertyArr = res[1].data
      let res2 = await getTree({ id: '1', tableName: 'nice_enum_tree' })
      if (res2[0]) {
        return
      }
      this.tableTree = JSON.parse(
        JSON.stringify([res2[1].data])
          .split('child')
          .join('children')
      )
      this.tableTree = JSON.parse(
        JSON.stringify(this.tableTree)
          .split('display_value')
          .join('label')
      )
      if (e.checked) {
        this.configDataSelect = []
        this.tableTreeLavble = []
        // 已经插入操作为修改
        this.configType = 'update'
        this.configData = {
          property_value_id: e.property_value_id,
          property_value_param: e.property_value_param,
          description: e.description_2,
          property_id: e.property_id_fb,
          t_id: e.t_id
        }
        console.log(this.configData, 'tid')
        e.property_value_id.map((item, index2) => {
          this.configDataSelect.push('')
          this.tableTreeLavble.push('未选择')
          this.selectValueFn(item, index2)
        })
        // 如果未树形获取初始值
        this.configDataSelect.map(async (item, index3) => {
          if (item === 'nice_enum') {
            let res = await getTree({
              id: e.property_value_param[index3],
              tableName: 'nice_enum_tree'
            })
            if (res[0]) {
              return
            }
            this.tableTreeLavble.splice(index3, 1, res[1].data.display_value)
          } else {
            this.tableTreeLavble.splice(index3, 1, '未选择')
          }
        })
      } else {
        this.configType = 'insert'
        // 未插入操作为插入
      }
      this.configDialog = true
    },
    // 删除字段属性信息
    async deleteConfigDialog () {
      let where = []
      this.configData.t_id.map((item, index) => {
        where.push({
          t_id: this.configData.t_id[index],
          table_id: this.fictitiousForm.table_id
        })
      })
      let res = await tableUpdate([
        {
          table_name: 'core_field_and_property',
          update: [
            {
              enable: 1
            }
          ],
          where: where
        }
      ])
      if (res[0]) {
        return
      }
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.selectFn({ fieldId: this.fieldIdTwo }, this.level_2_index, 2)
      this.configDialog = false
    },

    // 配置字段属性请求修改
    async updateConfigDialog () {
      let update = []
      let where = []
      this.configData.t_id.map((item, index) => {
        update.push({
          property_value_id: this.configData.property_value_id[index],
          property_value_param: this.configData.property_value_param[index],
          description: this.configData.description[index]
        })
        where.push({
          t_id: item,
          table_id: this.fictitiousForm.table_id
        })
      })
      let res = await tableUpdate([
        {
          table_name: 'core_field_and_property',
          update: update,
          where: where
        }
      ])
      if (res[0]) {
        return
      }
      this.$message({
        message: '配置字段属性成功',
        type: 'success'
      })
      this.selectFn({ fieldId: this.fieldIdTwo }, this.level_2_index, 2)
      this.configDialog = false
    },
    // 配置字段属性请求插入
    async addConfigDialog () {
      if (!this.configData.property_value_id) {
        this.$message('检测到您未选择属性值')
        return
      }
      let list = []
      this.configData.property_value_id.map((item, index) => {
        list.push({
          property_value_id: this.configData.property_value_id[index],
          property_value_param: this.configData.property_value_param[index],
          description: this.configData.description[index],
          field_id: this.fieldIdTwo,
          property_id: this.configData.property_id,
          table_id: this.fictitiousForm.table_id
        })
      })
      let res = await tableInsert([
        {
          table_name: 'core_field_and_property',
          list: list
        }
      ])
      if (res[0]) {
        return
      }
      this.configDialog = false
      this.selectFn({ fieldId: this.fieldIdTwo }, this.level_2_index, 2)
      this.$message({
        message: '配置字段属性成功',
        type: 'success'
      })
      this.configData = {
        property_value_id: [''],
        property_value_param: [''],
        description: [''],
        property_id: '',
        t_id: ['']
      }
    },
    checkedChange (e) {
      this.card_level_3.map((item, index) => {
        item.checked = e
      })
    },
    closeWindow () {
      if (this.addTableData && this.addTableData.length > 0) {
        this.$confirm('检测到您有数据插入未保存, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.drawer = false
          })
          .catch(() => {})
      } else {
        this.drawer = false
      }
    },
    // 更新字段
    updateField (e) {
      this.updateFieldForm = e
      this.updateFieldFormShow = true
    },
    // 更新接口
    async updateFieldUrl () {
      let res = await updateField(this.updateFieldForm)
      if (res[0] || res[1].code !== 0) {
        this.$message(res[1].msg)
        return
      }
      this.showTable({}, 'Fn')
      this.updateFieldFormShow = false
    },
    // 删除视窗中字段
    deleteField (e) {
      this.$confirm('确认删除该字段？')
        .then(async _ => {
          let res = await deleteField({ tId: e.tid })
          if (res[0]) {
            return
          }
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.showTable({}, 'Fn')
        })
        .catch(_ => {})
    },
    // 创建物理表
    async adminCreate () {
      let res = await adminCreateTable({ tableId: this.tableIdNow })
      if (res[0]) {
        return
      }
      this.$message({
        message: '保存成功',
        type: 'success'
      })
      this.showTable({}, 'Fn')
    },
    // 保存新字段
    async addTableDataNow () {
      for (let i = 0; i < this.addTableData.length; i++) {
        if (
          !this.addTableData[i].fieldName ||
          !this.addTableData[i].fieldType
        ) {
          this.$message('检测到字段名或类型未填写')
          return
        }
      }
      if (this.isCreated === false) {
        let res = await saveTableFieldAndDbProperty({
          tableId: this.tableIdNow,
          data: JSON.stringify(this.addTableData)
        })
        if (res[1].code === 0) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.showTable({}, 'this')
          this.addTableData = []
        } else {
          this.$message(res[1].msg)
        }
      } else {
        this.addTableData[0].tableId = this.tableIdNow

        let res = await isCreatedAdd(this.addTableData[0])
        if (res[1].code === 0) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.showTable({}, 'this')
          this.addTableData = []
        } else {
          this.$message(res[1].msg)
        }
      }
    },
    aaa (e) {
      console.log(e.$index)
    },
    // 添加模板
    addTableTemplate () {
      if (this.isCreated && this.addTableData && this.addTableData.length < 1) {
        this.addTableData.push(JSON.parse(JSON.stringify(this.addTableDataIn)))
      } else if (!this.isCreated) {
        this.addTableData.push(JSON.parse(JSON.stringify(this.addTableDataIn)))
      }
    },
    // 类型变化触发的方法
    fieldTypeChange (e, index, type) {
      //
      if (type === 'table') {
        e === 'varchar'
          ? (this.addTableData[index].fieldLength = '20')
          : (this.addTableData[index].fieldLength = '')
        e === 'tinyint'
          ? (this.addTableData[index].fieldLength = '2')
          : (this.addTableData[index].fieldLength = '')
        e === 'varchar'
          ? (this.addTableData[index].fieldLength = '20')
          : (this.addTableData[index].fieldLength = '')

        // eslint-disable-next-line no-unused-expressions
        e !== 'datetime'
          ? (this.addTableData[index].fieldDefaultValue = '')
          : ''
        e === 'decimal'
          ? (this.testPlaceholder = '长度,精度')
          : (this.testPlaceholder = '请输入长度')
      } else if (type === 'form') {
        e === 'varchar'
          ? (this.updateFieldForm.fieldLength = '20')
          : (this.updateFieldForm.fieldLength = '')
        e === 'tinyint'
          ? (this.updateFieldForm.fieldLength = '2')
          : (this.updateFieldForm.fieldLength = '')
        e === 'varchar'
          ? (this.updateFieldForm.fieldLength = '20')
          : (this.updateFieldForm.fieldLength = '')
        // eslint-disable-next-line no-unused-expressions
        e !== 'datetime' ? (this.updateFieldForm.fieldDefaultValue = '') : ''
        e === 'decimal'
          ? (this.testPlaceholder = '长度,精度')
          : (this.testPlaceholder = '请输入长度')
      }
    },
    // 抽屉拉出表
    async showTable (e, type) {
      if (type === 'click') {
        this.tableNameNow = e.tableName
        this.tableIdNow = e.tableId
      }
      let res = await listCoreFieldAndDbPropertyData({
        tableId: this.tableIdNow
      })
      if (res[0]) {
        return
      }
      this.tableData = res[1].data
      this.drawer = true
      // 查询这个表是不是已经存在
      let resTwo = await isExists({ tableName: this.tableNameNow })
      if (resTwo[0]) {
        return
      }
      this.isCreated = resTwo[1].data
    },
    groupProperties (e) {
      console.log(e, 'eeeeeee')
      return 'aaa<br />'
    },
    toInsert (type, e) {
      this.$router.push({
        path: 'insert-data',
        query: { type: type, tableName: e }
      })
    },
    // 给一级表新建表
    async createTable () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
        } else {
          return false
        }
      })
      if (!this.ruleForm.table_name || !this.ruleForm.description) {
        return
      }
      let res = await tableInsert([
        {
          table_name: 'core_table',
          list: [
            {
              table_name: this.ruleForm.table_name,
              description: this.ruleForm.description,
              parent_id: this.ruleForm.parent_id
            }
          ]
        }
      ])
      if (res[0]) {
        return
      }
      this.ruleForm = {
        table_name: '',
        description: '',
        parent_id: '0'
      }
      this.dialogVisible = false
      this.$message({
        message: '插入数据成功',
        type: 'success'
      })
      this.getTable()
    },
    // 删除一级表
    delectTable (type, e) {
      // 删除表数据 删除表数据+定义数据
      this.$confirm('此操作将永久删除该文件, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 修改接口改删除
          // let res = await tableUpdate([
          //   {
          //     table_name: 'core_table',
          //     update: JSON.stringify([
          //       {
          //         enable: 1
          //       }
          //     ]),
          //     where: JSON.stringify([
          //       {
          //         tableName: e.tableName
          //       }
          //     ])
          //   }
          // ])
          // if (res[0]) {
          //   return
          // }
          // // let res = await adminDeleteTable({ tableName: e.tableName })
          // // if (res[0]) {
          // //   return
          // // }
          // this.getTable()
          // // this.level_2_show = false
          // // this.level_3_show = false
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // })
        })
        .catch(() => {})
    },
    // 请求一级列表
    async getTable () {
      // let res = await coretable({ limit: 9999, page: 1 })
      let res = await listByCols({})
      if (res[0]) {
        return
      }
      this.card_level_1 = res[1].data
    },
    async selectFn (item, index, type) {
      if (type === 1) {
        this.fictitiousForm.table_id = item.tableId
        if (this.level_1_index === index) {
          return
        }
        this.level_1_index = index
        // 请求二级列表
        let res = await listFields({ table_id: item.tableId })
        if (res[0]) {
          return
        }
        this.card_level_2 = res[1].data
        this.level_2_show = true
        this.level_3_show = false
        this.level_4_show = false
        this.level_2_index = ''
        this.level_3_index = ''
        this.fictitiousForm.table_name = item.tableName
      } else {
        this.level_3_show = false
        this.fieldIdTwo = item.fieldId
        if (this.level_2_index === index) {
          // return
        }
        this.level_2_index = index
        // 请求三级列表
        let res = await queryList({ table_name: 'core_property' })
        if (res[0]) {
          return
        }
        this.card_level_3 = res[1].data
        // 请求是否存在
        let res2 = await queryList({
          table_name: 'core_field_and_property',
          field_id: this.fieldIdTwo
        })
        if (res[0]) {
          return
        }
        // eslint-disable-next-line camelcase
        let card_level_3_fb = res2[1].data
        // eslint-disable-next-line camelcase
        if (card_level_3_fb && card_level_3_fb.length > 0) {
          card_level_3_fb.map((item, index) => {
            for (let i = 0; i < this.card_level_3.length; i++) {
              if (this.card_level_3[i].property_id === item.property_id) {
                if (!this.card_level_3[i].checked) {
                  this.card_level_3[i].checked = true
                  this.card_level_3[i].property_id_fb = [].concat(
                    item.property_id
                  )
                  this.card_level_3[i].t_id = [].concat(item.t_id)
                  this.card_level_3[i].property_value_id = [].concat(
                    item.property_value_id
                  )
                  this.card_level_3[i].property_value_param = [].concat(
                    item.property_value_param
                  )
                  this.card_level_3[i].description_2 = [].concat(
                    item.description
                  )
                } else {
                  this.card_level_3[i].property_id_fb.push(item.property_id)
                  this.card_level_3[i].t_id.push(item.t_id)
                  this.card_level_3[i].property_value_id.push(
                    item.property_value_id
                  )
                  this.card_level_3[i].property_value_param.push(
                    item.property_value_param
                  )
                  this.card_level_3[i].description_2.push(item.description)
                }
              }
            }
          })
          console.log(this.card_level_3, 'card_level_3card_level_3')
        }
        this.level_3_show = true
        this.level_3_index = ''
        this.level_4_show = false
      }
    },
    // 展示四级列表
    setGroupProperties (item, index) {
      this.level_3_index = index
      this.level_4_show = true
      this.card_level_4 = item
      // card_level_4
    }
  }
}
</script>
<style scoped="scoped">
.u-tree-box {
  height: 200px;
  overflow: auto;
}
abbr {
  text-decoration: none;
}
.u-text {
  font-size: 14px;
}
.u-text:hover {
  cursor: pointer;
  background: #e5e9f2;
  /* color:  */
}
.u-text-3:hover {
  background: #e5e9f2;
  color: #3e83f8;
}
.item {
  padding: 13px 10px;
}

.m-box-card {
  width: 100%;
  max-height: 77vh;
  overflow: auto;
}
.z-f-right {
  float: right;
}
.z-primary-color {
  color: #3e83f8;
}
.u-p-text {
  width: 100%;

  margin: 0px 0px 0px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.z-flex-box {
  display: flex;
  justify-content: space-between;
}
.u-flex-left {
  justify-content: flex-start;
  width: 80%;
}
.u-flex-right {
  justify-content: flex-end;
  min-width: 38px;
}
.el-icon-setting {
  margin-right: 8px;
}
.el-icon-setting:hover {
  color: #3e83f8;
}
.u-operation {
  padding: 5px 0px 0px 15px;
}
.u-level-4 p {
  line-height: 20px;
}
.m-table-box {
  padding: 20px;
}
.u-table-add-btn {
  margin-left: 20px;
}
.m-window-box {
  padding: 30px 10px 10px 10px;
}
.u-create-table {
  display: flex;
  margin-bottom: 10px;
  position: sticky;
  top: 10px;
}
.m-el-drawer {
  overflow: auto;
  height: 100vh;
}
.u-is-create {
  color: brown;
  font-size: 16px;
}
a {
  cursor: pointer;
}
.el-icon-close {
  cursor: pointer;
  float: right;
}
.el-icon-close:hover {
  color: brown;
}
.z-sticky {
  background: white;
  top: 0px;
  position: sticky;
  z-index: 99;
}
.u-create-table-btn {
  margin-left: 10px;
}
.z-display {
  display: none;
}
.el-dropdown-link {
  color: #3e83f8;
}
.u-form-list {
  margin-bottom: 20px;
  border-bottom: 1px solid #c7c7c7;
}
</style>
